<template>
  <div class="app-container">
    <div class="homeVideo">
      <!-- <el-upload
        :action="uploadVideoUrl"
        accept="video/mp4, video/ogg, video/flv, video/*"
        :on-success="handleVideoUploadSuccess"
        :on-remove="handleRemoveVideo"
      >
        <el-button type="primary">点击上传视频</el-button>
      </el-upload> -->
      <el-upload
        class="video-uploader"
        :limit="1"
        :headers="headers"
        :action="uploadVideoUrl"
        :on-success="handleSuccess"
        :on-error="handleError"
        :on-remove="handleRemove"
        :before-upload="beforeUpload"
        :file-list="fileList"
        accept="video/mp4, video/ogg, video/flv, video/*"
      >
        <el-button v-if="!videoUrl" size="small" type="primary">点击上传视频</el-button>
        <div slot="tip" class="el-upload__tip">只能上传.mp4/.ogg/.flv格式的视频文件</div>
      </el-upload>
      <!-- <image-upload v-model="videoUrl" :fileSize="10" :fileType="fileType"/> -->
      <!-- <video v-if="videoUrl" :src="videoUrl" controls width="320" height="240" class="mart_20"></video> -->
      <el-input v-model="linkUrl" placeholder="请输入视频URL" class="mart_20" />
      <el-button type="primary" class="mart_20" @click="submitForm">确 定</el-button>
    </div>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { listContentSetting, addContentSetting, updateContentSetting } from "@/api/system/video";
export default {
  name: "HomeVideo",
  data() {
    return {
      fileList: [],
      videoUrl: null,
      linkUrl: '',
      uploadVideoUrl: process.env.VUE_APP_BASE_API + "/fileUpload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      fileType: ['mp4', 'ogg', 'flv', 'avi', 'wmv', 'rmvb'],
      listData: [],
      params: {},
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      listContentSetting({type: 3}).then(response => {
        this.listData = response.rows;
        if (this.listData.length) {
          this.videoUrl = this.listData[0].img;
          this.linkUrl = this.listData[0].content;
          this.fileList = this.listData[0].img ? [{url: this.videoUrl, name: 'homeVideo.mp4'}] : [];
        }
      });
    },
    submitForm() {
      if (!this.videoUrl && !this.linkUrl) {
        this.$modal.msgWarning("请选择上传视频或者输入视频url，只能选择一种方式");
        return;
      }
      if (this.videoUrl && this.linkUrl) {
        this.$modal.msgWarning("请选择上传视频或者输入视频url，只能选择一种方式");
        return;
      }
      if (this.listData.length) {
        this.params = {
          id: this.listData[0].id,
          img: this.videoUrl ? this.videoUrl : '',
          content: this.linkUrl ? this.linkUrl : '',
          type: 3,
        }
        updateContentSetting(this.params, this.listData[0].id).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.getList();
        })
      } else {
        this.params = {
          img: this.videoUrl ? this.videoUrl : '',
          content: this.linkUrl ? this.linkUrl : '',
          type: 3,
        }
        addContentSetting(this.params).then(response => {
          this.$modal.msgSuccess("添加成功");
          this.getList();
        })
      }
    },
    beforeUpload(file) {
      const isVideo = file.type === 'video/mp4' || file.type === 'video/ogg' || file.type === 'video/flv';
      const isLt100M = file.size / 1024 / 1024 < 10;
 
      if (!isVideo) {
        this.$message.error('上传的视频只能是MP4/OGG/FLV格式!');
      }
      if (!isLt100M) {
        this.$message.error('上传视频大小不能超过10MB!');
      }

      return isVideo && isLt100M;
    },
    handleSuccess(response, file, fileList) {
      this.videoUrl = response.msg;
      // 成功回调
      console.log('Upload Success:', response, file, fileList);
    },
    handleError(err, file, fileList) {
      // 错误回调
      console.error('Upload Error:', err, file, fileList);
    },
    handleRemove(file, fileList) {
      this.videoUrl = '';
      this.fileList = [];
    },
    // handleVideoUploadSuccess(response, file) {
    //   // 假设服务器返回的数据结构如下：
    //   // { success: true, data: { videoUrl: 'https://example.com/video.mp4' } }
    //   const videoUrl = response.data.videoUrl;
    //   // 将视频URL保存到组件状态中，以便后续回显
    //   this.videoUrl = videoUrl;
    // },
    // handleRemoveVideo(file, fileList) {
    //   // 清空回显的视频URL
    //   this.videoUrl = null;
    // },
  }
}
</script>
<style lang="scss">
.homeVideo {
  .mart_20 {
    margin-top: 20px;
  }
}
</style>